<template>
  <view class="page">
    <view class="head">
      <view class="head1">
        <text class="iconfont icon-fenxiang1" @click="goBack"></text>
        <text class="nav-title">商家入驻</text>
      </view>
    </view>

   
    <scroll-view>

      <view class="main">
        <!-- 页面内容 -->
        <view class="top">
          <view class="banner">
            <image src="http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/img/banner_01.png" mode="aspectFill"></image>
          </view>
        </view>

       <view class="content">
       		<view class="title">
       			基本信息
       		</view>
       		<view class="information">
       			<u--form
       							labelPosition="left"
       							:model="model1"
       							:rules="rules"
       							ref="uForm"
								 :labelStyle="{ fontWeight: 700 }"
       					>
       						<u-form-item
       								label="商户名称"
       								prop="userInfo.merchant"
       								borderBottom
       								ref="item1"
       								labelWidth="80"
       								labelAlign="right"
									
       						>
       							<u--input
       								v-model="model1.userInfo.merchant"
       								border="none"
									
									inputAlign="right"
									color= "#b5b5b5"
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
							<u-form-item
									label="经营时间"
									prop="userInfo.time"
									borderBottom
									ref="item1"
									labelWidth="80"
									labelAlign="right"
									@click="show = true;"
							>
								<u--input
									v-model="timeRange"
									border="none"
									
									inputAlign="right"
									color= "#b5b5b5"
								></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										
										color= "#b5b5b5"
								></u-icon>
							</u-form-item>
       						<u-form-item
       								label="经营地址"
       								prop="userInfo.address"
       								borderBottom
       								ref="item1"
       								labelWidth="80"
       								labelAlign="right"
       						>
       							<u--input
       								v-model="model1.userInfo.address"
       								border="none"
									inputAlign="right"
									color= "#b5b5b5"
									
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
       						<u-form-item
       								label="营业执照"
       								ref="item1"
       								labelWidth="80"
       								labelAlign="right"
       						>
       						
       						</u-form-item>
							<u-upload
							  :fileList="fileList1"
							  @afterRead="afterRead"
							  @delete="deletePic"
							  name="1"
							  multiple
							  :maxCount="1"
							  :previewFullImage="true"
							></u-upload>	
							<u-form-item borderBottom	></u-form-item>
       					</u--form>
       		</view>
       		<view class="title">
       			实际经营人
       		</view>
       		<view class="information">
       			<u--form
       							labelPosition="left"
       							:model="model1"
       							:rules="rules"
       							ref="uForm"
								:labelStyle="{ fontWeight: 700 }"
       					>
       						<u-form-item
       								label="姓名"
       								prop="userInfo.name"
       								borderBottom
       								ref="item1"
       								labelWidth="80"
       								labelAlign="right"
       						>
       							<u--input
       								v-model="model1.userInfo.name"
       								border="none"
									inputAlign="right"
									color= "#b5b5b5"
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
       						<u-form-item
       								label="身份证号"
       								prop="userInfo.idNumber"
       								borderBottom
       								ref="item1"
       								labelWidth="80"
       										labelAlign="right"
       						>
       							<u--input
       								v-model="model1.userInfo.idNumber"
       								border="none"
									inputAlign="right"
									color= "#b5b5b5"
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
       						<u-form-item
       								label="电话"
       								prop="userInfo.phone"
       								borderBottom
       								ref="item1"
       								labelWidth="80"
       										labelAlign="right"
       						>
       							<u--input
       								v-model="model1.userInfo.phone"
       								border="none"
									inputAlign="right"
									color= "#b5b5b5"
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
       						<u-form-item
       								label="银行卡"
       								prop="userInfo.bank"
       								borderBottom
       								ref="item1"
       								labelWidth="80"
       										labelAlign="right"
       						>
       							<u--input
       								v-model="model1.userInfo.bank"
       								border="none"
									inputAlign="right"
									color= "#b5b5b5"
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
							<u-form-item
									label="开户行"
									prop="userInfo.bankFrom"
									borderBottom
									ref="item1"
									labelWidth="80"
											labelAlign="right"
							>
								<u--input
									v-model="model1.userInfo.bankFrom"
									border="none"
									inputAlign="right"
									color= "#b5b5b5"
								></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
							</u-form-item>
       					</u--form>
       		</view>
       		<view class="title">
       			法人信息
       		</view>
       		<view class="information">
       			<u--form
       							labelPosition="left"
       							:model="model1"
       							:rules="rules"
       							ref="uForm"
								:labelStyle="{ fontWeight: 700 }"
       					>
       						<u-form-item
       								label="法人身份证号"
       								prop="userInfo.entityNumber"
       								borderBottom
       								ref="item1"
       								labelWidth="100"
       								labelAlign="right"
       						>
       							<u--input
       								v-model="model1.userInfo.entityNumber"
       								border="none"
									inputAlign="right"
									color= "#b5b5b5"
       							></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
										color= "#b5b5b5"
								></u-icon>
       						</u-form-item>
       						<u-form-item
       									label="身份证正反面照片"
       									
       									ref="item1"
       									labelWidth="150"
       									labelAlign="right"
       							>
       							
       							</u-form-item>
       							<u-upload
       							  :fileList="fileList2"
       							  @afterRead="afterRead"
       							  @delete="deletePic"
       							  name="2"
       							  multiple
       							  :maxCount="2"
       							  :previewFullImage="true"
       							></u-upload>
       						<u-form-item borderBottom	></u-form-item>
							<u-form-item
										label="商家门头"
										
										ref="item1"
										labelWidth="150"
										labelAlign="right"
								>
								
								</u-form-item>
								<u-upload
								  :fileList="fileList3"
								  @afterRead="afterRead"
								  @delete="deletePic"
								  name="3"
								  multiple
								  :maxCount="3"
								  :previewFullImage="true"
								></u-upload>
							<u-form-item borderBottom	></u-form-item>
							
							
								
       						<u-form-item
       									label="特许资质"
       									
       									ref="item1"
       									labelWidth="150"
       									labelAlign="right"
       							>
       							
       							</u-form-item>
       							<u-upload
       							  :fileList="fileList4"
       							  @afterRead="afterRead"
       							  @delete="deletePic"
       							  name="4"
       							  multiple
       							  :maxCount="2"
       							  :previewFullImage="true"
       							></u-upload>
       						
       						<u-form-item borderBottom	></u-form-item>
       						
       						
       						
       					</u--form>
       		</view>
       		
			</view>
			
			<view class="container">
			
						<view class="item">
							<u-checkbox-group  >
								<u-checkbox v-model="isChecked" shape="circle" size="12"  @change="checkboxChange"></u-checkbox>
							</u-checkbox-group>
							<view>
								我已阅读
								
								并已签署
								<text class="text1" @click="xieyi">《银联协议》</text>
							</view>
						</view>
						<view class="">
							
						</view>
					
			</view>
			<u-popup :show="show2" @close="close" @open="open" mode="center">
			            <view style="padding: 13rpx;">
			                <text>一、必须遵守执行《中华人民共和国计算机信息系统安全保护条例》、《中国教育和科研计算机网管理办法》、《中华人民共和国计算机信息网络国际互联网管理暂行规定》和国家有关互联网法律法规，严格执行安全保密制度，对所提供的信息负责。二、严格执行安全保密制度，对所提供的信息负责。不得利用计算机互联网从事危害国家安全、泄漏国家秘密等犯罪活动，不得制作、查阅、复制、传播有碍社会治安和有伤风化的信息。三、辽宁省交通高等专科学校信息中心服务账号的被授权者对自己使用的资源负有维护、保密责任，作好相关的安全工作。在校园网上不允许进行任何干扰网络用户、破坏网络服务和破坏网络设备的活动，这些活动包括（但并不局限于）在网络上发布不真实的信息，故意制作传播计算机病毒，破坏、盗用计算机网络上的信息资源，盗用他人帐号、私自转借、转让用户帐号，使用计算机网络进入未经授权使用的计算机，不以真实身份使用网络资源，擅自接入网络用户等。对被动收到的不良信息，严禁扩散，应及时报告中心工作人员，协助清除，并报有关部门处置。四、校园网上的信息和资源属于这些信息和资源的所有者，其它用户只有取得了这些信息和资源的所有者的允许后，才能使用这些信息和资源。网络上软件的使用遵守知识产权的有关法律法规。五、个人用户不允许对外提供信息服务，包括主页、电子公告 (电子布告牌、电子白板、电子论坛、网络聊天室、留言板等)、主页空间、文件传输、链接、电子邮件、电子商务、新闻组、宽带多媒体服务等活动。有需要开设服务器对外提供信息服务的用户，必须向学校提出申请并备案,到信息中心办理相关手续。主办者必须对服务信息承担相应的法律责任。六、必须接受并配合国家有关部门依法进行的监督检查，配合采取必要措施。有义务向信息中心和各级网络管理员报告任何违反用户守则的行为，并对自己在网络使用中的行为负责。七、校园网用户必须遵守上述规定，如不同意，用户可主动向信息中心提出书面说明，信息中心将有权停止对该用户的服务。
       								</text>
			            </view>
					</u-popup>
		 <u-datetime-picker
		                :show="show"
					
		                v-model="value1"
		                mode="time"
						title="开始时间"
						@confirm="confirm" @cancel="cancel"
		        ></u-datetime-picker>	
				<u-datetime-picker
				         :show="show1"	
				        v-model="value1"
				        mode="time"
						title="结束时间"
						@confirm="confirm1" @cancel="cancel1"
				       ></u-datetime-picker>	
       		
       </view>
		
		
    </scroll-view>

    <!-- 页脚 -->
   <view class="footer">
	    <view class="cancel" @click="cancel">取消</view>
      <view class="next" @click="submit">提交</view>
     
    </view>

  </view>
</template>

<script>

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default{
		data(){
			return{
				show:false,
				show1:false,
				show2:false,
				 isChecked: false,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				fileList1:[],
				fileList2:[],
				fileList3:[],
				fileList4:[],
				model1: {
								userInfo: {
									merchant:'',
									name: '',
									startTime: '',
									endTime:'',
									address:'',
									license:'',
									idNumber:'',
									phone:'',
									bank:'',
									entityNumber:'',
									bankFrom:'',
								},
							},
					rules: {
									'userInfo.merchant': {
										type: 'string',
										required: true,
										message: '请填写商户名称',
										trigger: ['blur', 'change']
									},
									'userInfo.address': {
										type: 'string',
										
										required: true,
										message: '请填写经营地址',
										trigger: ['blur', 'change']
									},
									'userInfo.license': {
										type: 'string',
										required: true,
										message: '请填写营业执照',
										trigger: ['blur', 'change']
									},
									
									'userInfo.name': {
										type: 'string',
										required: true,
										message: '请填写姓名',
										trigger: ['blur', 'change']
									},
									'userInfo.idNumber': {
										type: 'number',
										
										required: true,
										message: '请填写身份证号',
										trigger: ['blur', 'change']
									},
									'userInfo.phone': {
										type: 'number',
										required: true,
										message: '请填写电话',
										trigger: ['blur', 'change'],
										 validator(rule, value, callback) {
										        const phoneReg = /^1[3-9]\d{9}$/; // 正则表达式，验证以1开头的11位手机号
										        if (!value) {
										            callback(new Error('请填写电话'));
										        } else if (!phoneReg.test(value)) {
										            callback(new Error('请输入正确的手机号'));
										        } else {
										            callback();
										        }
										    }
									},
									'userInfo.bank': {
										type: 'number',
										
										required: true,
										message: '请填写银行卡',
										trigger: ['blur', 'change']
									},
									'userInfo.bankFrom': {
										type: 'string',
										
										required: true,
										message: '请填写开户行',
										trigger: ['blur', 'change']
									},
									'userInfo.entityNumber': {
									    type: 'number',
									    required: true,
									    message: '请填写法人身份证号',
									    trigger: ['blur', 'change'],
									    validator(rule, value, callback) {
									        const idCardReg = /^(?:\d{15}|\d{17}[\dXx])$/; // 正则表达式，验证15位或18位身份证号
									        if (!value) {
									            callback(new Error('请填写法人身份证号'));
									        } else if (!idCardReg.test(value)) {
									            callback(new Error('请输入正确的身份证号'));
									        } else {
									            callback();
									        }
									    }
									},

									
									
									
								},
								 fileList1: [],
			}
		},
		computed: {
		  timeRange: {
		    get() {
		      return `${this.model1.userInfo.startTime}-${this.model1.userInfo.endTime}`;
		    },
		    set(value) {
		      const times = value.split('-');
		      this.model1.userInfo.startTime = times[0];
		      this.model1.userInfo.endTime = times[1];
		    }
		  }
		},

		methods: {
			 open() {
			        // console.log('open');
			      },
			      close() {
			        this.show2 = false
			        // console.log('close');
			      },
			cancel(){
				this.show=false
				
			},
			
		
			confirm(e){
				console.log(e)
				this.model1.userInfo.startTime=e.value
				
				this.show=false
				this.show1=true
				
			},
			cancel1(){
				this.show1=false
				
			},
			
			xieyi(){
				this.show2=!this.show2;
			},
					checkboxChange(n){
						
						this.isChecked=n
						 console.log(this.isChecked)
						
					},
			confirm1(e){
				console.log(e)
				this.model1.userInfo.endTime=e.value
				
				this.show1=false
				
			},
			goBack(){
					uni.navigateBack(-1)
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				setTimeout(() =>{
				 this.mescroll.endSuccess();
				},2000)
			  
			},
			/*上拉加载的回调*/
			upCallback(page) {
			  setTimeout(() =>{
			    this.mescroll.endByPage(10, 20);
			  },2000)
			},
			 // 删除图片
			      deletePic(event) {
			        this[`fileList${event.name}`].splice(event.index, 1);
			      },
			      // 新增图片
			      async afterRead(event) {
			        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			        let lists = [].concat(event.file);
			        let fileListLen = this[`fileList${event.name}`].length;
			        lists.map((item) => {
			          this[`fileList${event.name}`].push({
			            ...item,
			            status: "uploading",
			            message: "上传中",
			          });
			        });
			        for (let i = 0; i < lists.length; i++) {
			          const result = await this.uploadFilePromise(lists[i].url);
			          let item = this[`fileList${event.name}`][fileListLen];
			          this[`fileList${event.name}`].splice(
			            fileListLen,
			            1,
			            Object.assign(item, {
			              status: "success",
			              message: "",
			              url: result,
			            })
			          );
			          fileListLen++;
			        }
			      },
			      uploadFilePromise(url) {
			        return new Promise((resolve, reject) => {
			          let a = uni.uploadFile({
			            url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
			            filePath: url,
			            name: "file",
			            formData: {
			              user: "test",
			            },
			            success: (res) => {
			              setTimeout(() => {
			                resolve(res.data.data);
			              }, 1000);
			            },
			          });
			        });
			      },
			submit(){
				console.log('this.isChecked', this.isChecked);  // 打印复选框的状态
							
				if (this.isChecked) {
				  uni.showToast({
				    title: '提交成功',
				   
				  });
				 uni.switchTab({
				    url: '/pages/home/home'
				  });
				} else {
				  // 如果没有勾选同意协议，显示提示
				  uni.showToast({
				    title: '请同意协议',
				    icon: 'none',  // 无图标
				    duration: 2000  // 提示持续时间（2秒）
				  });
				}
				
				
				
				
			
			},
			cancel(){
				uni.switchTab({
				        url: '/pages/home/home'
				    });
			}
			}
	}
</script>



<style scoped lang="scss">
@import 'submit.scss';


</style>
